<template>
	<div class="home">
		<div class="header" v-show="false">
			<div class="iconfont back-icon" @click="closeWin">&#xe624;</div>
			宝店认领
		</div>
		<!--<div class="banner" id="banner" >
			<swiper :options="swiperOption">
				<swiper-slide>
					<a href="https://www.mofing.com/web/baobao/business.html#/xianjin">
						<img src="../../assets/images/coinShop/banner2.jpg" width="100%" height="100%" />
					</a>												
				</swiper-slide>	
				<swiper-slide>
					<a href="https://www.mofing.com/web/baobao/business.html#/gas">
						<img src="../../assets/images/coinShop/banner1.jpg" width="100%" height="100%" />
					</a>												
				</swiper-slide>				
				<div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>-->
		<div class="tab">
			<div class="tab-item" v-for="(item,index) in tabInfo" @click="changeTab(index)" :class="{'current':index === current}">
				<h3 class="title">{{item.name}}</h3>
				<p class="desc">{{item.desc}}</p>
			</div>
		</div>
		<div class="tab1" v-show="current === 0">
			<div class="content">
				<div class="tab1-warrp">
					<div class="tab1-top">
						<div class="top-item">
							<div class="tab1-num">1</div>
							<h3 class="tab1-title">输入自己的店铺名搜索</h3>
						</div>
						<div class="top-item">
							<div class="tab1-num">2</div>
							<h3 class="tab1-title">提交店铺相关资料</h3>
						</div>
						<router-link tag="div" to="/type" class="btn1">选择店铺</router-link>
					</div>
					<div class="bottom-content">
						<div class=".title-img">
							<img src="../../assets/images/coinShop/1st-p-2-title(1).png" alt="" />
						</div>
						<div class="bot-item">
							<p style="color: #790105;">支持淘宝，天猫，京东美团等主流平台的店铺认领</p>
							<img src="../../assets/images/coinShop/1(3).jpg" alt="" width="70%"/>
							<p class="bot-desc">认领宝店后，即可有自己的宝店赚钱码，通过扫码免费参与“领码中现金”活动的用户，自动成为宝店主的宝友，宝友中奖你领奖，宝友消费你赚钱</p>
							<a :href="link2">
								<div class="sel-btn">了解宝店赚钱码 <span class="iconfont">&#xe62d;</span></div>
							</a>
							<img src="../../assets/images/coinShop/2(3).jpg" alt="" width="70%"/>
							<p class="bot-desc">认领宝店后，可免费参加平台每周开奖宝店活动，通过平台补贴，让商家免费获客，快速提升营业额。</p>	
							<a href="http://www.mofing.com/web/baobao/layout.html#/shop/100625">
								<div class="sel-btn">了解开奖宝店<span class="iconfont">&#xe62d;</span></div>	
							</a>
										
							<img src="../../assets/images/coinShop/3(4).jpg" alt="" width="70%"/>
							<p class="bot-desc">认领宝店后，借助阿宝商业社交平台，开展社会化营销，让用户主动帮你传播销售，同时免费建立自己的宝店会员体系</p>
							<router-link to="/marketing" tag="div" class="sel-btn">用宝店快速营销<span class="iconfont">&#xe62d;</span></router-link>
							<img src="../../assets/images/coinShop/4.jpg" alt="" width="70%"/>
							<p class="bot-desc">认领宝店后，通过手机就可免费任选各种营运功能，直接营运，赚钱快，体验好，营运省</p>
							<div class="sel-btn" style="height: 0;"></div>							
						</div>
					</div>
				</div>
			</div>			
		</div>
		<!-- tab  2     -->
		<div class="tab2" v-show="current === 1">
			<div class="content contnet-center">
				<div class="top-content">
					<div class="top-desc"> 
						<div class="top-num">
							1
						</div>
						<div class="top-info"> 
							<h3 class="top-title">输入朋友的店铺名搜索</h3>
							<p class="top-text vux-1px-t">仅支持实体店铺或淘宝，天猫，京东店</p>
						</div>
					</div>
					<div class="top-desc">
						<div class="top-num">2</div>
						<div class="top-info"> 
							<h3 class="top-title">分享店铺给开店的朋友</h3>
							<p class="top-text vux-1px-t">朋友通过分享可免费认领自己的宝店使用</p>
						</div>
					</div>
					<router-link to="shareSelect" tag="div" class="btn2">选择店铺</router-link>
				</div>	
				<div class="bottom-content">
					<div class=".title-img">
						<img src="../../assets/images/coinShop/wenjiandai(1).png" alt="" />
					</div>
					<div class="bot-item">
						<p style="color: #ec0944;">商家通过你的分享认领宝店，你免费享受宝店客权益</p>
						<img src="../../assets/images/coinShop/q1.jpg" alt="" width="70%"/>
						<p class="bot-desc">随时任选88个宝店，无需申请，享宝店商品会员特价，你的宝友同时享这些宝店商品会员特价</p>
						<a href="https://www.mofing.com/web/baobao/salesman.html#/vip_goods">
							<div class="sel-btn">挑选想要的商品 <span class="iconfont">&#xe62d;</span></div>
						</a>						
						<img src="../../assets/images/coinShop/q2.jpg" alt="" width="70%"/>
						<p class="bot-desc">平台按你宝友在你推广宝店消费额的5‰作为你的收益实时到账，随时提现</p>
					</div>
				</div>
			</div>

			
			<!--<div class="btn" @click="createStore">选择店铺</div>-->
			<!--<a class="link" href="">大家都创建，你没创建的原因是?</a>-->
		</div>	
		<!-- tab  3  -->
		<div class="tab3" v-show="current === 2">
			<div class="content">
				<div class="tab3-warrp">
					<div class="title-img">
						<img src="../../assets/images/coinShop/3-title.png" alt="" />
						<div @click="getCreateStatu"  class="btn3">我要开店</div>
					</div>
					<div class="tab3-con">
						<div class="tab-img">
							<img src="../../assets/images/coinShop/3-icon1.jpg" alt="" />
						</div>						
						<p class="tab3-desc">售卖商品和提供线下服务，免费引流获客</p>
						<div class="tab-img">
							<img src="../../assets/images/coinShop/3-icon2.jpg" alt="" />
						</div>						
						<p class="tab3-desc">媒体内容发布，让内容和流量快速变现</p>
						<div class="tab-img">
							<img src="../../assets/images/coinShop/3-icon3.jpg" alt="" />
						</div>						
						<p class="tab3-desc">代销产品，利用平台流量免费传播，再也不会被拉黑</p>
						<div class="tab-img">
							<img src="../../assets/images/coinShop/3-icon4.jpg" alt="" />
						</div>						
						<p class="tab3-desc">自己的个性空间，组建自己的圈子</p>
					</div>
				</div>
			</div>

			

		</div>
		<transition name="fade">
			<login @close="closeDailog" :param="param" @closeP="logSucc" v-show="isLogin"></login>
		</transition>
	</div>
</template>

<script>
	import {swiper , swiperSlide } from 'vue-awesome-swiper'
	import 'swiper/dist/css/swiper.css'	
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import Login from './login'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	export default{
		name : "home",
		data(){
			return{
				link2 : '',
				swiperOption:{
					pagination : {
						el : '.swiper-pagination'
					},
					autoplay  : true,
					loop      : true
				},
				isLogin  :false,
				current  : 0,
				isWeChat : true,
				tabInfo: [
					{
						name : '商家领宝店',
						desc : '早领早赚钱'
					},
					{
						name : '帮商家领店',
						desc : '省钱又赚钱'
					},
					{
						name : '开宝店',
						desc : '免费开店赚钱快'
					},
				],
				status    :'',
				param     :'',
				froms     :''

			}
		},
		components:{
			Login,
			swiper,
			swiperSlide
		},
		watch:{
			status(){
				if(this.status === 'success' && this.froms=== 'proxy'){
					this.createStore()
					this.status = ''
				}
				if(this.status === 'success' && this.froms=== 'self'){
					this.getCreateStatu()
					this.status = ''
				}
			}
		},
		methods:{
			logSucc(status,froms){
				this.status = status
				this.froms  = froms
			},
			closeDailog(){
				this.isLogin = false
			},
			createStore(){
				this.param = 'proxy'
				let params = this.urlParams()
				if(!params){
					return
				}
				let info = {
					userinfo : params
				}
				this.$vux.loading.show({text:'正在查询状态'})
				this.$axiosPost('/api/onlinestore/getMakerStatus',{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res.code == 2){
						this.$router.push('proxyOpen')
					}else if(res.code == 0){
						this.$router.push({path:'/examine',query:{status:res.code,fromin:'proxy'}})
					}else if(res.code == -1){
						this.$router.push({path:'/examine',query:{status:res.code,fromin:'proxy',reason:res.reason}})
					}else if(res.code == 1 && res.is_jump == 0){
						this.$router.push({path:'/examine',query:{status:res.code,fromin:'proxy'}})
					}else if(res.code == 1 && res.is_jump == 1){
						this.$router.push('/createShop')
					}
				})
			},
			urlParams(){
				let urlInfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				if(!this.isWeChat){
					if(!urlInfo.uid || !urlInfo.token){
						this.isLogin = true
						return false
					}
				}
				console.log(urlInfo)
				return urlInfo
			},
			getCreateStatu(){	
				this.$router.push('/createByType')
//				this.param = 'self'
//				let params = this.urlParams()
//				if(!params){
//					return
//				}				
//				let info = {
//					userinfo : params
//				}
//				this.$axiosPost('/api/onlinestore/getStoreAppStatus',{
//					data : JSON.stringify(info)
//				}).then( res => {
//					if(res.code == 2){
//						this.$router.push('/createByType')
//					}else if(res.code == 0){
//						this.$router.push({path:'/examine',query:{status:res.code,fromin:'self'}})
//					}else if(res.code == -1){
//						this.$router.push({path:'/examine',query:{status:res.code,fromin:'self',reason:res.reason}})
//					}else if(res.code == 1){
//						this.$router.push({path:'/examine',query:{status:res.code,fromin:'self'}})
//					}
//				})
			},
			changeTab(index){
				this.current = index
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			    } else {
			        this.isWeChat = true
			    }
			},
			closeWin(){
				let u = navigator.userAgent;
			    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
			    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
			    if(isAndroid) {
			        window.WebView.finish()
			    } else if (isiOS) {
			        window.location.href = 'mofing://exitbrowser';
			    }	
			}
		},
		mounted(){
			this.uid = getUrlParam('uid')
			this.link2 = `https://www.mofing.com/wechat/pages/sjyiqizhuan/${this.uid}.html`			
			this.isWeiXin()
			document.title = '领宝店'
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	.home /deep/ .swiper-container{
		height: 100%;
	}
	.home{
		text-align: left;
		.header{
			z-index: 199;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			box-sizing: border-box;
			.iphonex;
			height: 1.44rem;
			line-height: 2rem;
			text-align: center;
			background:#f7f7f8;
			font-size: .36rem;
			color: #000;
			.back-icon{
				position: absolute;
				top: .54rem;
				line-height: .9rem;
				padding: 0 .2rem;
			}
		}
		.banner{
			overflow: hidden;				
			width: 100%;
			height: 3.3rem;			
		}
		.tab{
			display: flex;
			height: 1rem;
			background: #fff;
			.tab-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;				
				text-align: center;
				.title{
					color: #777;
				}
				.desc{
					margin: 0;
					padding: 0;
					font-size: .2rem;
					color: #ccc;
				}
			}
			.current{
				background: #fb255b;
				color: #fff;			
				.title,.desc{
					color: #fff;
				}			
			}
		}

		.content{
			margin-top: .2rem;
			overflow: hidden;
			padding: .2rem;
			padding-bottom: .1rem;
			color: #333;
			.tab1-warrp{
				.tab1-top{
					position: relative;
					padding:1rem 0.2rem;
					display: flex;
					width: 100%;
					background: url('../../assets/images/coinShop/1st-ling(1).png');
					background-size: 100% 100%;
					.top-item{
						flex: 1;
						.tab1-num{
							margin: 0 auto;
							height: 0.7rem;
							width: 0.7rem;
							line-height: 0.7rem;
							text-align: center;
							border:1px solid #ac062e;
							color: #ac062e;
							border-radius: 50%;
							font-size: 0.4rem;
						}
						.tab1-title{
							width: 60%;
							margin: 0.2rem auto;							
							text-align: center;
						}
					}
					.btn1{
						position: absolute;
						bottom: 0.3rem;
						left: 50%;
						margin-left: -1.5rem;
						width: 3rem;
						height: .6rem;
						line-height: 0.6rem;
						text-align: center;
						color: #fff;
						font-size: 0.32rem;
						border-radius: 0.4rem;
						background: linear-gradient(left,#ffb31f,#ff9000);
						background: -webkit-linear-gradient(left,#ffb31f,#ff9000);
					}
				}	
			}

			.tab3-warrp{
				img{
					display: block;
					margin: auto;
				}
				.title-img{
					position: relative;
					.btn3{
						position: absolute;
						right: 0.8rem;
						top: 0.25rem;
						width: 2.3rem;
						height: 0.6rem;
						line-height: 0.6rem;
						text-align: center;
						border-radius: 0.4rem;
						font-size: 0.32rem;
						color: #fff;
						background: linear-gradient(left,#ffb31f,#ff9000);
						background: -webkit-linear-gradient(left,#ffb31f,#ff9000);
					}
				}
				.tab3-con{
					padding-bottom: 0.2rem;
					background: #fff;
					border-radius:0 0 0.36rem 0.36rem;
					.tab-img{
						margin: 0 auto;
						width: 2rem;
					}
					.tab3-desc{
						margin-bottom: 0.2rem;
						text-align: center;
					}
				}
			}
			.top-content{
				position: relative;
				padding:1rem 0.2rem;
				display: flex;
				width: 100%;
				background: url('../../assets/images/coinShop/baodian.png');
				background-size: 100% 100%;
				.top-desc{
					height: auto;
					display: flex;
					flex: 1;
					.top-num{
						flex: 0 0 0.5rem;
						width: 0.5rem;
						margin-right: 0.2rem;
						height: 0.5rem;
						line-height: 0.5rem;
						text-align: center;
						border: 1px solid #b00532;
						color: #b00532;
						border-radius: 50%;
					}
					.top-text{
						margin-top: 0.1rem;
						padding-top: 0.1rem;
						flex: 1;						
					}
					
				}
				.top-desc:nth-of-type(2){
					margin-left: 0.2rem;
				}
				.btn2{
					position: absolute;
					bottom: 0.3rem;
					left: 50%;
					margin-left: -1.5rem;
					width: 3rem;
					height: .6rem;
					line-height: 0.6rem;
					text-align: center;
					color: #fff;
					font-size: 0.32rem;
					border-radius: 0.4rem;
					background: linear-gradient(left,#ffb31f,#ff9000);
					background: -webkit-linear-gradient(left,#ffb31f,#ff9000);
				}
			}
			.bottom-content{
				margin-top: 0.3rem;				
				img{
					display: block;
					margin: auto;
				}
				.bot-item{
					padding-bottom: 0.6rem;
					background: #fff;
					text-align: center;
					border-radius: 0 0 0.36rem .36rem;
					.bot-desc{
						margin: 0.15rem auto;

						width: 90%;
						line-height: 0.38rem;
						font-size: .24rem;
						
					}
					.sel-btn{
						margin: 0.15rem auto;
						margin-bottom: 0.4rem;
						width: 2.6rem;
						height: 0.44rem;
						line-height: 0.44rem;
						text-align: center;
						color: #fff;
						background: #fa255b;
						border-radius: 0.4rem;
						font-size: 0.26rem;
						.iconfont{
							font-size: 0.26rem;
						}
					}
				}
			}
			.title{
				line-height: .8rem;
				text-align: center;
				font-size:.36rem
			}
			.item{
				float: left;
				width: 45%;
				height: 1.9rem;
				margin: .15rem 2.5%;
				background: #fff;
				border-radius: .15rem;
				.img-warrp{
					overflow: hidden;
					margin:  0 auto;
					height: .9rem;
					width: .9rem;
				}
				.item-title{
					text-align: center;
					color: #fff;
				}
				.item-desc{
					text-align: center;
					line-height: .3rem;
					color: #fff;
					font-size: .20rem;
				}
			}
			.item1{
				background: linear-gradient(top,#4ed9f6,#1a7be2);
				background: -webkit-linear-gradient(top,#4ed9f6,#1a7be2);
			}
			.item2{
				background: linear-gradient(top,#fdd341,#fc6c23);
				background: -webkit-linear-gradient(top,#fdd341,#fc6c23);
			}
			.item3{
				background: linear-gradient(top,#f75a79,#eb0f1b);
				background: -webkit-linear-gradient(top,#f75a79,#eb0f1b);
			}
			.item4{
				background: linear-gradient(top,#dd49fd,#792af5);
				background: -webkit-linear-gradient(top,#dd49fd,#792af5);
			}
		}
		.contnet-center{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.tab2,.tab3{
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
		.desc{
			margin-top: .3rem;
			padding: .2rem .3rem;
			.title{
				margin-bottom: 0.2rem;
				height: .4rem;
				line-height: .4rem;
				text-align: center;
				font-size: .36rem;
			}
			.text{
				text-indent: .3rem;
				padding: .1rem .2rem;
				line-height: .38rem;
				font-size: 0.24rem;
			}
		}
		.bot-img{
			margin: 0 auto;
			width: 7rem;
			height: .6.5rem;
			padding:0 .8rem;
		}
		.btn{
			margin: .5rem auto;
			height: .86rem;
			width: 85%;
			line-height: .86rem;
			text-align: center;
			background: #fb255b;
			color: #fff;		
			border-radius: .1rem;
			font-size: .32rem;
		}
		.link{
			display: inline-block;
			padding: 0 .5rem;
			padding-bottom: .4rem;
			width: 100%;
			text-align: right;
			text-decoration: none;
			color: #fb255b;
		}
		.fade-enter-active,.fade-leave-active{
			transition: opacity .4s ease-out;
		}
		.fade-enter,.fade-leave-to{
			opacity: 0;
		}
	}
</style>